<template>
  <div class="category-list">
    <project-nav-bar></project-nav-bar>
    <!-- v-model 不方便控制父组件传过来的属性值 -->
    <!-- <category-nav-list
      @navListClick="navListClick"
      :navData="navData"
      :actives="active"
    ></category-nav-list> -->
    <div class="category-lists">
      <van-tabs @click="navListClick" v-model="active">
        <van-tab v-for="item in navData" :key="item.id" :title="item.name">
          <div class="category-list-main">
            <p class="title">{{ item.name }}</p>
            <p class="desc">{{ item.front_desc }}</p>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <goods-list :goodsList="goodsList"></goods-list>
  </div>
</template>

<script>
import { getCateGoryNav, getGoodsList } from "@/network/categorylist";
import ProjectNavBar from "./children/ProjectNavBar";
// import CategoryNavList from "./children/CategoryNavList";
import GoodsList from "./children/GoodsList";
export default {
  components: {
    ProjectNavBar,
    // CategoryNavList,
    GoodsList,
  },
  data() {
    return {
      navData: [],
      goodsList: [],
      iid: null,
      active: null,
    };
  },
  created() {
    this.getCateGoryNavs();
    this.getGoodsLists();
  },
  methods: {
    // navListClick(id) {
    //   console.log(id, "首页");
    //   // this.iid = id;
    //   // 发送请求
    //   this.getGoodsLists(id);
    // },
    navListClick(name, title) {
      let id = this.navData[name].id;
      console.log(id, "首页");
      // this.iid = id;
      // 发送请求
      this.getGoodsLists(id);
    },
    getCateGoryNavs() {
      this.iid = this.$route.query.id;
      const datas = {
        id: this.iid,
      };

      getCateGoryNav(datas).then((res) => {
        this.navData = res.navData;
        console.log(res);
        this.active = res.navData.findIndex((item) => item.id == this.iid);
        // console.log(this.active)
      });
    },
    getGoodsLists(id) {
      // 简单判断
      id = id ? id : (this.iid = this.$route.query.id);
      const datas = {
        categoryId: id,
      };
      getGoodsList(datas).then((res) => {
        this.goodsList = res.data;
        // console.log(this.goodsList);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.category-list {
  background-color: #f4f4f4;
}
.category-lists {
  margin-top: 44px;
}
.category-list-main {
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  margin: 10px 0 5px;
  p {
    margin: 5px 0;
  }
  .desc {
    color: #666;
  }
  .title {
    font-size: 16px;
  }
}
</style>